<%@ taglib prefix="s" uri="/struts-tags" %>
<%--
  Created by IntelliJ IDEA.
  User: 高金磊
  Date: 2021/5/9
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link rel="icon" href="<%=basePath%>favicon.ico" type="image/ico">
    <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basePath%>css/fonts.css" rel="stylesheet">
    <link href="<%=basePath%>css/style.css" rel="stylesheet">
</head>
<body style="height: 1800px;overflow: scroll">
<s:action name="OrderStatistics">
<div class="col-lg-6">
    <div class="card" style="height: 470px;">
        <div class="card-header"><h4>订单状态分析(近180天)</h4></div>
        <div class="card-body">
            <canvas id="chart-pie1" width="320" height="320"></canvas>
            <%--完成比例((完成订单+取消订单)/总的订单):<span style="color: #0FB25F ;font-size: 20px"><s:property value="#request.per"/>%</span><br>--%>
            完成比例(完成订单/总的订单):<span style="color: #0FB25F ;font-size: 20px"><s:property value="#request.per"/>%</span><br>
            完成取消比(完成订单/取消的订单):<span style="color: #0FB25F ;font-size: 20px"><s:property value="#request.per1"/></span><br>

        </div>
    </div>
</div>
<div class="col-lg-6">
    <div class="card" style="height: 470px;">
        <div class="card-header"><h4>进行中的订单状态比例</h4></div>
        <div class="card-body">
            <canvas id="chart-pie" width="320" height="320"></canvas>
            <h2 style="color: red"><s:property value="#request.err"/></h2>
            总订单数:<s:property value="#request.sum"/>
        </div>
    </div>
</div>

<div class="row" >

    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4>近30天新增订单数量</h4>
            </div>
            <div class="card-body">
                <canvas height="100" class="js-chartjs-bars"></canvas>
            </div>
        </div>
    </div>
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/main.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/Chart.js"></script>
<script type="text/javascript">

    new Chart($("#chart-pie"), {
        type: 'pie',
        data: {
            labels: ["预约中", "待归还", "已逾期"],
            datasets: [{
                data: [<s:property value="#request.data"/>],
                backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
            }]
        },
        options: {
            responsive: false
        }
    });
    new Chart($("#chart-pie1"), {
        type: 'pie',
        data: {
            labels: ["订单完成", "订单取消","进行中"],
            datasets: [{
                data: [<s:property value="#request.data1"/>],
                backgroundColor: ['#24bb10', '#e74c3c', '#eee918']
            }]
        },
        options: {
            responsive: false
        }
    });

</script>

</s:action>
</body>
<script>
    $(document).ready(function(e) {
        var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' )

        var $dashChartBarsData = {
            labels: [<s:property value="#request.order_date"/>],
            datasets: [
                {
                    label: '近30天订单数量',
                    borderWidth: 1,
                    borderColor: '#28da10',
                    backgroundColor: '#24bb10',
                    fill:false,
                    data: [<s:property value="#request.ordernums"/>]
                }
            ]
        };

        new Chart($dashChartBarsCnt, {
            type: 'line',
            data: $dashChartBarsData
        });
    });
</script>
</html>
